<template>
  <div>
    <Row>
      <Card>
        <VmBtable type="edit" ref="VmBtable"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :importBtn="false"
                  :downTemplate="false"
                  :exportBtn="false"
                  :searchBtn="false"
                  :batchDelBtn="true"
                  :addBtn="true"
                  :operate="operate"
                  searchText="关键字:"
                  cleanText="刷新"
                  v-on:search-change="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:restFn="restFn"
                  v-on:addFn="addModal"
                  v-on:batchDelect="batchDelete"
        >
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="submitForm" :mask-closable="false"
           width="600" v-on:on-cancel="cancelForm">
      <Form ref="modalForm" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <!--        <FormItem label="id" prop="id">-->
        <!--          <Input v-model="modal.form.id" placeholder="请输入..." clearable style="width:90%"/>-->
        <!--        </FormItem>-->
        <FormItem label="角色中文名" prop="roleName">
          <Input v-model="modal.form.roleName" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
<!--        <FormItem label="排序号" prop="ord">-->
<!--          <Input v-model="modal.form.ord" placeholder="请输入..." clearable style="width:90%"/>-->
<!--        </FormItem>-->
        <FormItem label="角色类型" prop="roleType">
          <Input v-model="modal.form.roleType" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="初始化角色">
          <i-switch size="large" v-model="modal.form.isInit" :true-value="0" :false-value="1">
            <span slot="open">打开</span>
            <span slot="close">关闭</span>
          </i-switch>
        </FormItem>
        <FormItem label="锁定标识">
          <i-switch size="large" v-model="modal.form.isDel" :true-value="0" :false-value="1">
            <span slot="open">锁定</span>
            <span slot="close">解锁</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancelForm">取消</Button>
        <Button type="primary" @click="submitForm" :loading="false">确定</Button>
      </div>
    </Modal>
    <Modal v-model="menuModal.visible" title="权限编辑"
           v-on:on-ok="submitMenu" :mask-closable="false"
           width="600" v-on:on-cancel="cancelForm">
      <Tree ref="menuTree" :data="menuData" show-checkbox></Tree>
<!--      <Table row-key="id" :columns="menuColumn" :data="menuData" border></Table>-->
    </Modal>
  </div>
</template>
<script>
import API from '@/libs/api'
import VmBtable from '@/components/vm/vm-btable'

export default {
  components: { VmBtable },
  data () {
    return {
      menuData: [],
      menuColumn: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '名称', align: 'left', key: 'title', tree: true },
        { title: '权限',
          align: 'center',
          key: 'permission',
          render: (h, params) => {
            const row = params.row
            let tags = []
            tags.push(h('Tag', { props: { checkable: true, color: row.permission.includes('create') > 0 ? 'primary' : 'default' },
              on: { 'on-change': () => { console.log(params.permission) } } }, 'C'))
            tags.push(h('Tag', { props: { checkable: true, color: row.permission.includes('create') > 0 ? 'primary' : 'default' },
              on: { 'on-change': () => { console.log(params.permission) } } }, 'C'))
            tags.push(h('Tag', { props: { checkable: true, color: row.permission.includes('update') > 0 ? 'warning' : 'default' },
              on: { 'on-change': () => { console.log(params.permission) } } }, 'U'))
            tags.push(h('Tag', { props: { checkable: true, color: row.permission.includes('search') > 0 ? 'success' : 'default' },
              on: { 'on-change': () => { console.log(params.permission) } } }, 'R'))
            tags.push(h('Tag', { props: { checkable: true, color: row.permission.includes('create') > 0 ? 'delete' : 'default' },
              on: { 'on-change': () => { console.log(params.permission) } } }, 'D'))
            return h('div', tags)
          }
        }
      ],
      apiUrl: 'SysRole',
      replaceWord: '',
      searchParam: {
        current: 1,
        size: 20,
        total: 0
      },
      dataColumns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '序号', type: 'index', align: 'center', width: 100 },
        { title: '角色中文名', align: 'center', key: 'roleName' },
        // { title: '排序号', align: 'center', key: 'ord', },
        { title: '角色类型', align: 'center', key: 'roleType' },
        {
          title: '是否为初始化角色',
          align: 'center',
          key: 'isInit',
          render: (h, params) => {
            const row = params.row
            return h('Tag', { props: { color: row.isInit === 0 ? 'primary' : 'error' } }, row.isInit === 0 ? '初始化' : '非初始')
          }
        },
        {
          title: '锁定标识',
          align: 'center',
          key: 'isDel',
          render: (h, params) => {
            const row = params.row
            return h('Tag', {
              props: {
                color: row.isDel === 0 ? 'primary' : 'error'
              }
            }, row.isDel === 0 ? '解锁' : '锁定')
          }
        },
        { title: '创建时间', align: 'center', key: 'createTime' },
        { title: '创建者', align: 'center', key: 'createBy' },
        { title: '修改时间', align: 'center', key: 'updateTime' },
        { title: '修改者', align: 'center', key: 'lastModifiedBy' },
        {
          title: '操作',
          type: 'operation',
          align: 'center',
          width: 180,
          render: (h, param) => {
            let btn = []
            let editMenu = h('Icon', {
              props: { type: 'md-key', size: '24' },
              style: { color: 'blur', cursor: 'pointer', marginRight: '10px' },
              on: { click: () => this.editMenu(param.row) }
            })
            let edit = h('Icon', {
              props: { type: 'md-create', size: '24' },
              style: { color: 'blur', cursor: 'pointer', marginRight: '10px' },
              on: { click: () => this.editModal(param.row) }
            })
            let delBtn = h('Icon', {
              props: { type: 'ios-trash-outline', size: '24' },
              style: { color: 'red', cursor: 'pointer', marginLeft: '5px' },
              on: { click: () => this.delModal(param.row) }
            })
            btn.push(editMenu, edit, delBtn)
            return h('div', btn)
          }
        }
      ],
      operate: [],
      dataTable: [],
      modal: {
        title: '',
        visible: false,
        validate: false,
        rules: {},
        form: {
          id: ''
        }
      },
      menuModal: {
        visible: false,
        id: '',
        menuList: []
      }
    }
  },
  methods: {
    restFn () {
      this.searchParam.current = 1
      this.searchParam.size = 20
      this.queryFn()
    },
    queryMenus (roleId) {
      API.fetch(this.apiUrl + '/getMenuListByRoleId', { roleId: roleId }).then(
        res => {
          console.log(res)
          this.menuData = res.data
          Object.assign(this.menuData[1], { expand: true })
        }
      )
    },
    editMenu (row) {
      this.menuModal.visible = true
      this.menuModal.id = row.id
      this.queryMenus(row.id)
    },
    submitMenu () {
      this.menuModal.menuList = this.$refs.menuTree.getCheckedAndIndeterminateNodes().map(item => item.id)
      if (this.menuModal.id) {
        API.put(this.apiUrl + '/updateRoleMenu', this.menuModal).then(
          res => {
            this.menuModal.visible = false
            this.menuData = []
            this.menuModal.id = ''
            this.queryFn()
          },
          error => this.$Message.info(error.msg)
        )
      }
    },
    queryFn () {
      API.fetch(this.apiUrl + '/page', this.searchParam).then(
        res => {
          let data = res.data
          this.dataTable = data.records
          this.searchParam.total = data.total
        },
        error => {
          this.$Message.info(error.msg)
        }
      )
    },
    addModal () {
      this.modal.form.id = ''
      Object.assign(this.modal, {
        title: '新增',
        visible: true,
        form: this.modal.form
      })
    },
    editModal (row) {
      Object.assign(this.modal, {
        title: '编辑',
        visible: true
      })
      Object.assign(this.modal.form, row)
    },
    submitForm () {
      try {
        this.$refs.modalForm.validate(valid => {
          if (valid) {
            if (this.modal.form.id) {
              API.put(this.apiUrl, this.modal.form).then(
                res => {
                  this.modal.visible = false
                  this.queryFn()
                  this.$refs.modalForm.resetFields()
                  this.modal.form.id = ''
                },
                error => this.$Message.info(error.msg)
              )
            } else {
              API.post(this.apiUrl, this.modal.form).then(
                res => {
                  this.modal.visible = false
                  this.queryFn()
                  this.$refs.modalForm.resetFields()
                  this.modal.form.id = ''
                },
                error => this.$Message.info(error.msg)
              )
            }
          } else {
            return false
          }
        })
      } catch (e) {
        this.$refs.modalForm.resetFields()
      }
    },
    cancelForm () {
      this.modal.visible = false
      this.menuModal.visible = false
      this.menuData = []
      if (this.modal.form.id) {
        this.$refs.modalForm.resetFields()
      }
    },
    delModal (row) {
      console.info(row)
      API.del(this.apiUrl, row.id).then(res => {
        this.queryFn()
      },
      error => this.$Message.info(error.msg))
    },
    batchDelete () {

    },
    pageChangeFn (current) {
      this.searchParam.current = current
      this.queryFn()
    },
    searchFn (value) {
      this.queryFn()
    }
  },
  created () {
  },
  mounted () {
    this.queryFn()
  }
}
</script>
<style scoped>
</style>
